//退款管理

<template>
  <div>
     <div>
        <el-row>
          <el-col :span="2">
          <div class="rightHead">
            <span style="margin-left:10px">交易退款</span>
            <span class="s2"></span>
          </div>
        </el-col>
        <el-col :span="2" :offset="20">
          <span class="exit">退出登录</span>
        </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="24">
          <el-col :span="24" style="background:#fff">
          <!-- 申请时间 -->
          <el-row style="margin-top:30px">
            <el-col :span="4">
              <span>申请时间</span>
            </el-col>
              <el-col :span="6">
                <div class="block">
                    <el-date-picker
                    v-model="value2"
                    type="datetimerange"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    size="mini"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="xztime">
                    </el-date-picker>
                </div>
              </el-col>
          </el-row>
          <!-- 退款类型 退款状态-->
          <el-row style="margin-top:30px">
            <el-col :span="4">
              <span>退款类型</span>
            </el-col>
            <el-col :span="4">
              <el-select v-model="value" placeholder="请选择" size="mini" @change="tkxz">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <span>退款状态</span>
            </el-col>
            <el-col :span="4">
              <el-select v-model="RefundStatus" placeholder="请选择" size="mini"  @change="tkzt">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <!-- 交易状态 退款原因-->
          <el-row style="margin-top:20px">
            <el-col :span="4">
              <span>
                交易状态
              </span>
            </el-col>
            <el-col :span="4">
              <el-select v-model="transactionStatus" placeholder="请选择" size="mini" @change="jyzt">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <span>退款原因</span>
            </el-col>
            <el-col :span="4">
              <el-select v-model="reasonsRefund" placeholder="请选择" size="mini" @change="tkyy">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row style="margin-top:20px" :gutter="10">
            <el-col :span="5" :offset="1">
              <el-input v-model="sosuo" placeholder="请输入订单号" size="mini"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" round size="mini" @click="so">搜索</el-button>
            </el-col>
          </el-row>
          <el-row style="margin:30px 0;">
            <el-table 
              :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              style="width: 100%"
              :row-class-name="tableRowClassName"
              @row-click="geti"
              @selection-change="handleSelectionChange">>
              <el-table-column 
                  type="selection"
                  width="50"
                  :selectable="selectable">
                </el-table-column>
              <el-table-column
                fixed
                prop="orderNumber"
                label="订单号"
                width="100">
              </el-table-column>
              <el-table-column
                prop="commodity"
                label="商品"
                width="160">
               <template scope="scope">
                  <el-image
                      style="width: 50px; height: 50px; margin-right:10px"
                      :src="scope.row.commodity[0]"
                  ></el-image>
                    <span 
                    style="vertical-align:20px; display:inline-block; width:80px">{{scope.row.commodity[1]}}
                    </span>
               </template>
              </el-table-column>
              <el-table-column
                prop="orderAmount"
                label="订单金额"
                width="100">
              </el-table-column>
              <el-table-column
                prop="refundAmount"
                label="退款金额"
                width="100">
              </el-table-column>
              <el-table-column
                prop="deliveryStatus"
                label="交易状态"
                width="78">
              </el-table-column>
              <el-table-column
                prop="reason"
                label="原因"
                width="100">
              </el-table-column>
              <el-table-column
                prop="appTime"
                label="申请时间"
                width="100">
              </el-table-column>
              <el-table-column
                prop="refundStatus"
                label="退款状态"
                width="110">
              </el-table-column>
              <el-table-column 
              label="操作">
                    <template scope="scope">
                      <el-button type="text" size="small" 
                      v-if="scope.row.refundStatus == '进行中的订单退款'"
                      @click="handleClick(scope.$index,scope.row)">同意</el-button>
  
                    <el-button type="text" size="small" 
                     v-if="scope.row.refundStatus == '进行中的订单退款'"
                     @click="handleClick2(scope.$index,scope.row)">拒绝</el-button>  
                      <div v-else-if="scope.row.refundStatus == '退款成功'">退款成功</div>
                      <div v-else-if="scope.row.refundStatus == '已拒绝的退款'">已拒绝</div>
                    </template>
                    
              </el-table-column>
            </el-table>
             <el-dialog title="退款管理" :visible.sync="tktrue">
               <el-dialog
                  width="50%"
                  style="text-align: center"
                  title="确认退款"
                  :visible.sync="innerVisible"
                  append-to-body>
                  <div>
                    将退款
                    <span>{{tkmoney}}</span>
                    元到对方账户，无法撤销！确定继续？  
                  </div>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="closedtrueto">确 定</el-button>
                  </div>
                </el-dialog>
               <div>
                 <span>&nbsp;&nbsp;&nbsp;&nbsp;订单号：</span>
                  <el-input
                    v-if="!this.tableData == []"
                    v-model="orderNumber1"
                    :disabled="true"
                    style="width:200px">
                  </el-input>
               </div>
               <div style="margin-top:20px; margin-bottom:20px">
                 <span>订单金额：</span>
                 <el-input
                    v-if="!this.tableData == []"
                    v-model="orderAmount1"
                    :disabled="true"
                    style="width:200px">
                  </el-input>
               </div>
               <div>
                 <span>退款金额：</span>
                 <el-input
                    v-model="tkmoney"
                    style="width:200px">
                  </el-input>
               </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="tktrue = false">取 消</el-button>
                <el-button type="primary" @click="closedtrue">确 定</el-button>
              </div>
            </el-dialog>
             <el-dialog title="退款管理" :visible.sync="tkfalse">
               <div>
                 <span>&nbsp;&nbsp;&nbsp;&nbsp;订单号：</span>
                  <el-input
                    v-if="!this.tableData == []"
                    v-model="orderNumber1"
                    :disabled="true"
                    style="width:200px">
                  </el-input>
               </div>
               <div style="margin-top:20px; margin-bottom:20px">
                 <span>订单金额：</span>
                 <el-input
                    v-if="!this.tableData == []"
                    v-model="orderAmount1"
                    :disabled="true"
                    style="width:200px">
                  </el-input>
               </div>
                <div>
                  <span>选择理由：</span>
                   <el-select v-model="form.region" placeholder="请选择拒绝理由">
                    <el-option label="用户原因导致" value="用户原因导致"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="tkfalse = false">取 消</el-button>
                <el-button type="primary" @click="closedfalse">确 定</el-button>
              </div>
            </el-dialog>
          </el-row>
          <el-row style="margin-bottom:40px">
            <el-col :span="2" style="margin-left:20px">
              <el-button type="primary" round size="mini" @click="egree">批量同意</el-button>
              <el-dialog
                title="提示"
                :visible.sync="alltrue"
                width="50%">
                <span>将批量同意用户全额退款，确定继续吗？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="alltrue = false">取 消</el-button>
                  <el-button type="primary" @click="alltrueto">确 定</el-button>
                </span>
              </el-dialog>
            </el-col>
          
            <el-col :span="6" :offset="15">
              <div class="block">
                <el-pagination
                  layout=" total,prev, pager, next"
                  :total="total"
                  :page-size= pagesize
                  @current-change="current_change">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </el-col>
        </el-col>
      </el-row>
  </div>
</template>

<style lang="less">
    
  .rightHead{
    width: 1020px;
    background: white;
    height: 60px;
    line-height: 60px;
    text-align: left;
  }
  .s1{
    // margin-left: -50px;
    font-size: 18px;
  }
  .s2{
    display: inline-block;
    width: 750px;
  }
  .exit{
    display: inline-block;
    text-align: center;
    border: none;
    // margin-left:10px;
    line-height: 60px;
    cursor: default;
  }
</style>

<script>
  export default {
    data() {
      return {
        // 交易时间选择
         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: '',
        // 退款类型
        options: [{
          value: '全部',
          label: '全部'
        }, {
          value: '售中退款',
          label: '售中退款'
        }, {
          value: '售后退款',
          label: '售后退款'
        }],
        value: '',
        // 退款状态
        options1: [{
          value: '全部',
          label: '全部'
        }, {
          value: '进行中的订单退款',
          label: '进行中的订单退款'
        }, {
          value: '退款成功',
          label: '退款成功'
        },{
          value: '已拒绝的退款',
          label: '已拒绝的退款'
        }],
        RefundStatus: '',
        // 交易状态
        options2: [{
          value: '全部',
          label: '全部'
        }, {
          value: '待收货',
          label: '待收货'
        }, {
          value: '未发货',
          label: '未发货'
        },{
          value: '已完成',
          label: '已完成'
        }],
        transactionStatus: '',
        // 退款原因
        options3: [{
          value: '全部',
          label: '全部'
        }, {
          value: '大小尺寸与描述不符',
          label: '大小尺寸与描述不符'
        }, {
          value: '七天无理由退换货',
          label: '七天无理由退换货'
        }, {
          value: '物流信息错误',
          label: '物流信息错误'
        }, {
          value: '其他',
          label: '其他'
        }],
        reasonsRefund: '',
        sosuo:'',
        checked: true,
        tableData: [],
         tktrue: false,
         tkfalse:false,
         total:0,
         pagesize:2,//每页的数据条数
        currentPage:1,//默认开始页面
          form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        tkmoney: '',
        rowi:'',
        orderNumber1:'',
        orderAmount1:'',
        innerVisible:false,
        multipleSelection:[],
        alltrue:false,
      }
    },
    methods: {
      // 同意的确认弹框
      egree() {
        this.alltrue = true;
      },
      alltrueto(){
        for(let i=0; i<this.multipleSelection.length; i++){
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let h = date.getHours();
            let m = date.getMinutes();
            let s = date.getSeconds();
            if(month < 10){
              month = '0'+ month
            };
            if(day < 10){
              day = '0'+ day
            };
            if(h < 10){
              h = '0'+ h
            };
            if(m < 10){
              m = '0'+ m
            };
            if(s < 10){
              s = '0'+ s
            };
              this.$axios.post('/api/tkture',{
              orderid:this.multipleSelection[i].orderNumber,
              tkmoney:this.multipleSelection[i].orderAmount,
              tktime:`${year}-${month}-${day} ${h}:${m}:${s}`
            }).then((res) => {
              if(res.data.error){
                this.$message({
                  showClose:true,
                  message: this.multipleSelection[i].orderNumber +'退款出错！',
                  type:'error'
                });
              }
            });
        };
        this.tkzt();
        this.alltrue = false
      },
      // 拒绝的确认弹框
      refuse() {
        this.$confirm('确定拒绝吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      closedtrue(){
        this.innerVisible = true
      },
      closedtrueto(){
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if(month < 10){
          month = '0'+ month
        };
        if(day < 10){
          day = '0'+ day
        };
        if(h < 10){
          h = '0'+ h
        };
        if(m < 10){
          m = '0'+ m
        };
        if(s < 10){
          s = '0'+ s
        };
        if(this.tkmoney){
          this.$axios.post('/api/tkture',{
          orderid:this.orderNumber1,
          tkmoney:this.tkmoney,
          tktime:`${year}-${month}-${day} ${h}:${m}:${s}`
        }).then((res) => {
          if(!res.data.error){
            this.$message({
              showClose:true,
              message:'退款成功！',
              type:'success'
            });
            this.tkzt();
          }
        })
        this.tktrue = false,
        this.innerVisible = false
        }
      },
      closedfalse(){
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if(month < 10){
          month = '0'+ month
        };
        if(day < 10){
          day = '0'+ day
        };
        if(h < 10){
          h = '0'+ h
        };
        if(m < 10){
          m = '0'+ m
        };
        if(s < 10){
          s = '0'+ s
        };
        if(this.form.region){
            this.$axios.post('/api/tkfalse',{
            orderid:this.orderNumber1,
            yy:this.form.region,
            tktime:`${year}-${month}-${day} ${h}:${m}:${s}`
          }).then((res) => {
            if(!res.data.error){
            this.$message({
              showClose:true,
              message:'操作成功！',
              type:'success'
            });
            this.tkzt();
          }
          })
          this.tkfalse = false
        }
      },
      
      tableRowClassName ({row, rowIndex}) {
      // 把每一行的索引放进row
        row.index = rowIndex
      },
      geti(row, event, column){
          this.rowi = row.index;
      },
      xztime(){
        let time1 = this.value2[0];
        let time2 = this.value2[1];
        this.tableData=[];
        this.$axios.post('/api/dftime',{
            time1:time1,
            time2:time2
        }).then((res) => {
          if(!res.data.error){
          
          for(var i=0; i<res.data.data.length; i++){
            let datajson={
              orderNumber: res.data.data[i].orderid,
              commodity: [res.data.data[i].p_picture,res.data.data[i].p_name],
              orderAmount: (res.data.data[i].sp_number * res.data.data[i].p_price).toFixed(2),
              refundAmount: res.data.data[i].r_price,
              deliveryStatus: res.data.data[i].t_status,
              reason: res.data.data[i].r_reason,
              appTime: res.data.data[i].r_date,
              refundStatus:res.data.data[i].r_state
            };
            this.tableData.push(datajson)
          }
         
        }
        })
      },
      tkxz(){
        if(this.value != '全部'){
          this.tableData=[];
          this.$axios.post('/api/tklx',{
          time1:this.value2[0],
          time2:this.value2[1],
          lx:this.value
        }).then((res) => {
          if(!res.data.error){
            for(var i=0; i<res.data.data.length; i++){
            let datajson={
              orderNumber: res.data.data[i].orderid,
              commodity: [res.data.data[i].p_picture,res.data.data[i].p_name],
              orderAmount: res.data.data[i].sp_number * res.data.data[i].p_price,
              refundAmount: res.data.data[i].r_price,
              deliveryStatus: res.data.data[i].t_status,
              reason: res.data.data[i].r_reason,
              appTime: res.data.data[i].r_date,
              refundStatus:res.data.data[i].r_state
            };
            this.tableData.push(datajson)
          }
          }
        })
        }else{
          this.xztime()
        }
      },
      tkzt(){
        if(this.RefundStatus != '全部'){
          this.tableData=[];
          this.$axios.post('/api/tkzt',{
          time1:this.value2[0],
          time2:this.value2[1],
          lx:this.RefundStatus
        }).then((res) => {
          if(!res.data.error){
            for(var i=0; i<res.data.data.length; i++){
            let datajson={
              orderNumber: res.data.data[i].orderid,
              commodity: [res.data.data[i].p_picture,res.data.data[i].p_name],
              orderAmount: res.data.data[i].sp_number * res.data.data[i].p_price,
              refundAmount: res.data.data[i].r_price,
              deliveryStatus: res.data.data[i].t_status,
              reason: res.data.data[i].r_reason,
              appTime: res.data.data[i].r_date,
              refundStatus:res.data.data[i].r_state
            };
            this.tableData.push(datajson)
          }
          }
        })
        }else{
          this.xztime()
        }
      },
      jyzt(){
        if(this.transactionStatus != '全部'){
          this.tableData=[];
          this.$axios.post('/api/jyzt',{
          time1:this.value2[0],
          time2:this.value2[1],
          lx:this.transactionStatus
        }).then((res) => {
          if(!res.data.error){
            for(var i=0; i<res.data.data.length; i++){
            let datajson={
              orderNumber: res.data.data[i].orderid,
              commodity: [res.data.data[i].p_picture,res.data.data[i].p_name],
              orderAmount: res.data.data[i].sp_number * res.data.data[i].p_price,
              refundAmount: res.data.data[i].r_price,
              deliveryStatus: res.data.data[i].t_status,
              reason: res.data.data[i].r_reason,
              appTime: res.data.data[i].r_date,
              refundStatus:res.data.data[i].r_state
            };
            this.tableData.push(datajson)
          }
          }
        })
        }else{
          this.xztime()
        }
      },
      tkyy(){
        if(this.reasonsRefund != '全部'){
          this.tableData=[];
          this.$axios.post('/api/tkyy',{
          time1:this.value2[0],
          time2:this.value2[1],
          lx:this.reasonsRefund
        }).then((res) => {
          if(!res.data.error){
            for(var i=0; i<res.data.data.length; i++){
            let datajson={
              orderNumber: res.data.data[i].orderid,
              commodity: [res.data.data[i].p_picture,res.data.data[i].p_name],
              orderAmount: res.data.data[i].sp_number * res.data.data[i].p_price,
              refundAmount: res.data.data[i].r_price,
              deliveryStatus: res.data.data[i].t_status,
              reason: res.data.data[i].r_reason,
              appTime: res.data.data[i].r_date,
              refundStatus:res.data.data[i].r_state
            };
            this.tableData.push(datajson)
          }
          }
        })
        }else{
          this.xztime()
        }
      },
      so(){
        if(this.sosuo == '' || this.sosuo.length != 14){
          this.$message({
            showClose: true,
            message:'订单号不正确！',
            type:'error'
            })
        }else{
            this.tableData=[];
        this.$axios.post('/api/so',{
          orderid:this.sosuo
        }).then((res) => {
          if(!res.data.error){
            for(var i=0; i<res.data.data.length; i++){
            let datajson={
              orderNumber: res.data.data[i].orderid,
              commodity: [res.data.data[i].p_picture,res.data.data[i].p_name],
              orderAmount: res.data.data[i].sp_number * res.data.data[i].p_price,
              refundAmount: res.data.data[i].r_price,
              deliveryStatus: res.data.data[i].t_status,
              reason: res.data.data[i].r_reason,
              appTime: res.data.data[i].r_date,
              refundStatus:res.data.data[i].r_state
            };
            this.tableData.push(datajson)
          }
          }
        })
        }
        
      },
      handleClick(index, row){
        this.tktrue = true;
        this.orderNumber1 = row.orderNumber;
        this.orderAmount1 = row.orderAmount;
        this.tkmoney = row.orderAmount;
      },
      handleClick2(index, row){
        this.tkfalse= true;
        this.orderNumber1 = row.orderNumber;
        this.orderAmount1 = row.orderAmount;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      selectable(row, index) { 
        if(row.refundStatus == '进行中的订单退款'){
          return true
        }else {
          return false
        }
      },
      current_change: function (currentPage) {
          this.currentPage = currentPage;
      },
    }, 
    created() {
      this.value = this.options[0].value;
      this.RefundStatus = this.options1[0].value;
      this.transactionStatus = this.options2[0].value;
      this.reasonsRefund = this.options3[0].value;
    },
    updated() {
      this.total = this.tableData.length
    },
    mounted() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let jtime = `${year}-${month}-${day} 00:00:00`;
      let ztime = `${year}-${month}-${day - 1} 00:00:00`;
      this.value2 = [ztime,jtime];
      this.$axios.post('/api/dftime',{
        time1:this.value2[0],
        time2:this.value2[1]
      }).then((res) => {

        if(!res.data.error){
          
          for(var i=0; i<res.data.data.length; i++){
            let datajson={
              orderNumber: res.data.data[i].orderid,
              commodity: [res.data.data[i].p_picture,res.data.data[i].p_name],
              orderAmount: (res.data.data[i].sp_number * res.data.data[i].p_price).toFixed(2),
              refundAmount: res.data.data[i].r_price,
              deliveryStatus: res.data.data[i].t_status,
              reason: res.data.data[i].r_reason,
              appTime: res.data.data[i].r_date,
              refundStatus:res.data.data[i].r_state
            };
            this.tableData.push(datajson)
          }
        }
      })
    },
  }
</script>